<!-- #layout name=blank -->
<div id="app">
  <div class="page-header">
    <h1 class="title">SQL Logs</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div
    class="navbar navbar-default"
    style="display: flex; align-items: center; padding-left: 5px;"
  >
    <form class="form-inline">
      <div class="form-group">
        <label>Week</label>
        <select v-model="query.week" class="form-control">
          <option v-for="week in weeks" :key="week" :value="week"
            >{{week}}</option
          >
        </select>
      </div>

      <div class="form-group">
        <label>Type</label>
        <select v-model="query.type" class="form-control">
          <option v-for="type in types" :key="type" :value="type"
            >{{type}}</option
          >
        </select>
      </div>

      <div class="form-group">
        <label>Enter your keyword</label>
        <input v-model="query.keyword" type="text" class="form-control" />
      </div>

      <a @click="search" class="btn green">Search</a>
    </form>
  </div>
  <kb-table :data="model.list">
    <kb-table-column :label="Kooboo.text.site.siteLog.type" prop="type">
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.common.lastModified">
      <template v-slot="row">
        <span>
          {{ new Date(row.dateTime).toDefaultLangString() }}
        </span>
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.component.pageEditor.content"
      prop="sql"
    >
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.component.pageEditor.parameters"
      prop="params"
    >
    </kb-table-column>
  </kb-table>

  <kb-pager
    :page-nr="model.pageNr"
    :total-pages="model.totalPages"
    @change="changePage"
  ></kb-pager>
</div>

<style>
  .form-group {
    display: inline-flex !important;
    align-items: center;
  }
  .form-group > * {
    margin: 0 8px;
  }
</style>
<script>
  (function () {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbPager.js",
    ]);
  })();
  new Vue({
    el: "#app",
    data: function () {
      var me = this;
      return {
        breads: [
          {
            name: "SITES",
          },
          {
            name: "DASHBOARD",
          },
          {
            name: Kooboo.text.common.sqlLogs,
          },
        ],
        model: {
          list: [],
        },
        query: {
          type: "",
          week: "",
          keyword: "",
          pageIndex: 1,
        },
        types: ["", "sqlite", "mysql", "sqlserver"],
        weeks: ["2020-34"],
      };
    },
    mounted: function () {
      var me = this;
      Kooboo.SqlLog.weeks().then(function (rsp) {
        me.weeks = rsp.model;
        me.query.week = me.weeks[0];
      });
    },
    computed: {
      createModelRules: function () {
        var me = this;
        rules = {
          value: [{ required: Kooboo.text.validation.required }],
        };
        if (this.isNewStore) {
          rules.key = [
            { required: Kooboo.text.validation.required },
            {
              pattern: /^([A-Za-z][\w\-\.]*)*[A-Za-z0-9]$/,
              message: Kooboo.text.validation.objectNameRegex,
            },
            {
              remote: {
                url: Kooboo.KeyValue.isUniqueName(),
                data: function () {
                  return {
                    name: me.createModel.key,
                  };
                },
              },
              message: Kooboo.text.validation.taken,
            },
          ];
        }
        return rules;
      },
    },
    methods: {
      changePage: function (e) {
        this.query.pageIndex = e;
        this.search();
      },
      search() {
        var me = this;
        Kooboo.SqlLog.list(this.query).then(function (rsp) {
          me.model = rsp.model;
        });
      },
    },
  });
</script>
